<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <div class="title">延期交付查询</div>
      </div>
      <div class="middle">
        <div class="box">
          <input type="text" v-model="phone" placeholder="电话号码"  class="left">
          <div v-on:click="search" class="button">搜索</div>
        </div>
      </div>
      <div class="bottom">
        <div class="table">
          <div class="mess_area">
            <div class="b1">客户</div>
            <div class="b1">手机号</div>
            <div class="b1">等待单号</div>
            <div class="b1">商品码</div>
            <div class="b1">数量</div>
          </div>
        </div>
        <div class="table main" v-for="(item, index) in datalist" :key="item.waitingNumber">
          <div class="mess_area">
            <div class="b1">{{item.customer}}</div>
            <div class="b1">{{item.phone}}</div>
            <div class="b1">{{item.id}}</div>
            <div class="b1">{{item.barCode}}</div>
            <div class="b1">{{item.count}}</div>
          </div>
          <div class="button" v-on:click="finishTheDelay(item)">完成</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
    import aftersales from "../../service/aftersales";

    export default {
        name: "CheckADelayInDelivery",
      data () {
          return {
            old_phone: null,
            phone: null,
            datalist: []
          }
      },
      mounted() {
      },
      methods: {
          async search() {
            if (this.phone==null||this.phone==''||this.old_phone==this.phone) {
              return
            }
            const loginedUser = this.$store.getters.getLoginUser
            if (loginedUser == null) {
              return
            }
            const data = {
              serviceId: loginedUser.storeId,
              phone: this.phone
            }
            let result = await aftersales.searchforDelay(data)
            if (result.data.code != 2000) {
              console.log(result.data)
              return
            }
            this.datalist = result.data.data;
            this.old_phone = this.phone
          },
        async finishTheDelay(item) {
          if (item.id==null){
            return
          }
          const loginedUser = this.$store.getters.getLoginUser
          if (loginedUser == null) {
            return
          }
          const data = {
            serviceId: loginedUser.storeId,
            id: item.id
          }
          let result = await aftersales.finishTheDelay(data)
          this.old_phone = null
          this.search()
          if (result.data.code == 2000) {
            alert("修改成功")
          } else {
            console.log(result)
            alert(result.data.data)
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .main {
    width: 100%;
    height: calc(100% - 1px);
    background: #FFFFFF;
    border-top: 1px solid transparent;
    .content {
      width: 603px;
      left: 181px;
      margin: 0 auto;
      .top {
        height: 155px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .title {
          height: 32px;
          width: 100%;
          margin: 0 auto;
          text-align: center;
          font: 32px bold;
        }
      }
      .middle {
        width: 100%;
        height: 118px;
        display: flex;
        justify-content: center;
        .box {
          width: 450px;
          height: 25px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          .left {
            marin: 0 auto;
            height: 23px;
            width: 300px;
            border: 1px solid black;
          }
          .button {
            text-align: center;
            height: 23px;
            line-height: 25px;
            margin: 0 auto;
            width: 125px;
            font-size: 13px;
            border: 1px solid black;
            border-radius: 5px;
            background: #f2f2f2;
          }
          .button:hover {
            background: #c1e8ff;
            cursor: pointer;
          }
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        .table {
          width: 100%;
          height: 30px;
          display: flex;
           flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .mess_area {
            display: flex;
            .b1 {
              width: 100px;
              height: 28px;
              border: 1px solid black;
              line-height: 28px;
              font-size: 13px;
              text-align: center;
            }
          }
          .button {
            width: 83px;
            height: 23px;
            text-align: center;
            line-height: 23px;
            font-size: 13px;
            border: 1px solid black;
            border-radius: 5px;
            background: #f2f2f2;
          }
          .button:hover {
            background: #c1e8ff;
            cursor: pointer;
          }
        }
        .main {
          border-top: 0;
        }
        .main:hover {
          background: #fffdef;
        }
      }
    }
  }
</style>
